<template>
	<el-collapse v-model="activeNames">
		<el-collapse-item title="组合服务结构" name="1">
			<el-row>
				<el-col :span="16">
					<div style="margin:10px;">
						<span v-html="rawHtml"></span>
					</div>
				</el-col>
				<el-col :span="8">
					<el-tabs type="border-card" style="height: 100%;">
						<el-tab-pane v-for="item in meta_service" :label="item">
							<el-descriptions v-if="meta_service_info[item] != null" :column="1" border
								style="height: auto;">
								<el-descriptions-item v-for="value, key in meta_service_info[item]" :label="key">
									{{ value }}
								</el-descriptions-item>
							</el-descriptions>
							<span v-else>未找到该服务信息</span>
						</el-tab-pane>
					</el-tabs>
				</el-col>
			</el-row>
		</el-collapse-item>
		<el-collapse-item title="服务详细信息" name="2">
			<el-table :data="service_detail" style="margin-left:30px;margin-bottom: 20px;">
				<el-table-column property="label" label="服务信息" width="150" />
				<el-table-column property="value" label="值" width="200" />
			</el-table>
		</el-collapse-item>
		<el-collapse-item title="调用服务" name="3">
			{{ "当前阶段：" + step }}
			<el-form :model="param_form" label-width="120px" style="width: 80%;" v-if="param_form.length">
				<el-form-item label="输入参数值">
					<div v-for="n in param_form.length" style="width: 100%;">
						<el-input v-model="param_form[n - 1].value" style="width: 60%;margin-bottom: 10px;">
							<template #append> {{ param_form[n - 1].name + ':' + param_form[n - 1].type }} </template>
						</el-input>
					</div>
				</el-form-item>
			</el-form>
			<el-button type="primary" @click="onSubmit" style="margin-left: 30px;">发送请求</el-button>
			<el-table :data="response" style="margin-left:30px" v-if="requested">
				<el-table-column v-for="(item, index) in response[0]" :key="index" :property="index" :label="index"
					width="150" />
			</el-table>
		</el-collapse-item>
	</el-collapse>
</template>
  
<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import Api from '../../util/axios'
import { useRoute } from 'vue-router';

const activeNames = ref(['1', '3'])
const route = useRoute()
const service_detail = reactive<any[]>([])
const param_form = reactive<any[]>([])
const rawHtml = ref('')
const meta_service_info = reactive({})
const meta_service = reactive<any[]>([])
onMounted(async () => {
	await Api.post('queryDeploymentByName', {
		"deploymentName": route.query.name + '.bpmn'
	}).then((res) => {
		for (const key in res) {
			if (key == 'svgContent') {
				let head = '<?xml version="1.0" encoding="UTF-8"?>'
				rawHtml.value = res[key].substring(head.length)
				// console.log(rawHtml.value);
			}
			else {
				if (key == 'businessDataNeed') {
					res[key].forEach(element => {
						param_form.push({ name: element, type: 'string' })
					});
					// TODO
					param_form.length = 1
				}
				else if (key == 'serviceTaskNames') {
					meta_service.push(...res[key])
					step.value = res[key][0]
				}

				if (res[key] != '' && key != 'content') {
					service_detail.push({ label: key, value: res[key] })
				}
			}
		}
	})
	await Api.post('show_api').then((res: any) => {
		let show_col = ['note', 'params', 'path', 'updateTime']
		res.forEach(element => {
			if (meta_service.indexOf(element['path']) != -1) {
				let temp = {}
				for (const key in element) {
					if (show_col.indexOf(key) != -1) {
						temp[key] = element[key]
					}
				}
				meta_service_info[element['path']] = temp
			}
		});
		// console.log(meta_service_info);
	})
})

const response = reactive<any[]>([])
const requested = ref(false)
var step = ref('')
const onSubmit = () => {
	let params = {}
	param_form.forEach(element => {
		params[element.name] = element.type == 'boolean' ? element.value == 'true' : element.value
	});
	if (!requested.value) {
		Api.post('instance', {
			"deploymentName": route.query.name + '.bpmn',
			"inputData": params
		}).then((res: any) => {
			console.log(res);

			response.length = 0
			response.push(...res['body']['data'])
			requested.value = true

			Api.post('queryNextServiceTaskInfo', { "deploymentName": route.query.name + '.bpmn' }).then((_res: any) => {
					step.value = res['nextTaskName']
					param_form.length = 0
					console.log(_res['businessDataNeed'][0]);
					
					_res['businessDataNeed'].forEach(param => param_form.push({ name: param, type: 'string' }))
					param_form.push({ name: 'continue', type: 'boolean' })
				})
		})
	}
	else {
		Api.post('complete', {
			"deploymentName": route.query.name + '.bpmn',
			"processData": params
		}).then((res: any) => {
			console.log(res);

			response.length = 0
			response.push(...res['body']['data'])
			requested.value = true

			// 330624201909235911
			if (res['nextTaskName']) {
				Api.post('queryNextServiceTaskInfo', { "deploymentName": route.query.name + '.bpmn' }).then((_res: any) => {
					step.value = res['nextTaskName']
					param_form.length = 0
					console.log(_res['businessDataNeed'][0]);
					
					_res['businessDataNeed'].forEach(param => param_form.push({ name: param, type: 'string' }))
					param_form.push({ name: 'continue', type: 'boolean' })
				})
			}
		})
	}
}
</script>
